<template>
  <div class="details">
    <div class="title">
      <div class="box1">预约列表 / 预约详情</div>
    </div>
    <div class="detailsBox">
      <div class="editBox">
        <button @click="editBtn">编辑</button>
      </div>
      <div class="listBox">
        <div class="listBox1">
          <div class="listBox2">
            <span>姓名 </span>
            <input type="text" :value="detailsData.name" readonly />
          </div>
        </div>
        <div class="listBox1">
          <div class="listBox2">
            <span>微信名称 </span>
            <input type="text" :value="detailsData.wechatName" readonly />
          </div>
        </div>
        <div class="listBox1">
          <div class="listBox2">
            <span>服务项目 </span>
            <input v-if="detailsData.type === 0" type="text" value="洗车" readonly />
            <input v-if="detailsData.type === 1" type="text" value="贴膜" readonly />
            <input v-if="detailsData.type === 2" type="text" value="维修" readonly />
            <input v-if="detailsData.type === 3" type="text" value="改装" readonly />
          </div>
        </div>
      </div>
      <div class="listBox">
        <div class="listBox1">
          <div class="listBox2">
            <span>预约时间 </span>
            <input type="text" :value="detailsData.reserveDateTime" readonly />
          </div>
        </div>
        <div class="listBox1">
          <div class="listBox2">
            <span>预约状态 </span>
            <input v-if="detailsData.status === 1" type="text" value="进行中" readonly />
            <input v-if="detailsData.status === 2" type="text" value="已完成" readonly />
            <input v-if="detailsData.status === 3" type="text" value="取消" readonly />
          </div>
        </div>
        <div class="listBox1">
          <div class="listBox2">
            <span>车辆型号 </span>
            <input type="text" :value="detailsData.model" readonly />
          </div>
        </div>
      </div>
      <div class="listBox">
        <div class="listBox1">
          <div class="listBox2">
            <span>电话号码 </span>
            <input type="text" :value="detailsData.telephone" readonly />
          </div>
        </div>
        <div class="listBox1">
          <div class="listBox2">
            <span>车牌号码 </span>
            <input type="text" :value="detailsData.carId" readonly />
          </div>
        </div>
        <div class="listBox1">
          <div class="listBox2">
            <div class="">
              <span>消费金额（元） </span>
              <input type="text" :value="detailsData.amount" readonly />
            </div>
          </div>
        </div>
      </div>
      <div class="bzBox">
        <p>备注（管理员）</p>
        <el-input maxlength="100" type="textarea" :value="detailsData.adminMemo" readonly />
      </div>
      <div class="bzBox">
        <p>备注（客户）</p>
        <el-input maxlength="100" type="textarea" :value="detailsData.reserveMemo" readonly />
      </div>
    </div>

    <!-- 编辑弹层 -->
    <el-dialog width="60%" :show-close="false" :close-on-click-modal="false" :visible.sync="editShowDia" :close-on-press-escape="false" top="7vh">
      <div class="diaBox">
        <div class="diaTitle">编辑预约</div>
        <div class="diaBody">
          <div class="diaBodyBox">
            <div class="diaBodyli">
              <div class="liBox">
                <div class="liBoxItem">
                  <span><span style="color: #f00">*</span>姓名 </span>
                  <input type="text" maxlength="4" v-model="editYuYue.name" placeholder="请输入姓名" />
                </div>
              </div>
              <div class="liBox">
                <div class="liBoxItem">
                  <span>微信名称 </span>
                  <input type="text" maxlength="12" v-model="editYuYue.wechatName" placeholder="请输入微信名称（12字以内）" />
                </div>
              </div>
            </div>
          </div>
          <div class="diaBodyBox">
            <div class="diaBodyli">
              <div class="liBox">
                <div class="liBoxItem">
                  <span><span style="color: #f00">*</span>服务项目 </span>
                  <el-select v-model="editYuYue.type" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" placeholder="请选择服务项目"> </el-option>
                  </el-select>
                </div>
              </div>
              <div class="liBox">
                <div class="liBoxItem">
                  <span><span style="color: #f00">*</span>预约时间 </span>
                  <el-date-picker v-model="editYuYue.reserveDateTime" value-format="yyyy-MM-dd hh:mm" type="datetime" placeholder="请选择预约时间"> </el-date-picker>
                </div>
              </div>
            </div>
          </div>
          <div class="diaBodyBox">
            <div class="diaBodyli">
              <div class="liBox">
                <div class="liBoxItem">
                  <span><span style="color: #f00">*</span>车牌号 </span>
                  <input type="text" v-model="editYuYue.carId" placeholder="请输入车牌号" />
                </div>
              </div>
              <div class="liBox">
                <div class="liBoxItem">
                  <span><span style="color: #f00">*</span>车辆型号 </span>
                  <input type="text" v-model="editYuYue.model" placeholder="请输入车辆型号" />
                </div>
              </div>
            </div>
          </div>
          <div class="diaBodyBox">
            <div class="diaBodyli">
              <div class="liBox">
                <div class="liBoxItem">
                  <span><span style="color: #f00">*</span>电话号码 </span>
                  <input type="text" v-model="editYuYue.telephone" placeholder="请输入电话号码" />
                </div>
              </div>
              <div class="liBox">
                <div class="liBoxItem">
                  <span><span style="color: #f00">*</span>预约状态 </span>
                  <input v-if="editYuYue.status === 1" type="text" value="进行中" readonly />
                  <input v-if="editYuYue.status === 2" type="text" value="已完成" readonly />
                  <input v-if="editYuYue.status === 3" type="text" value="取消" readonly />
                </div>
              </div>
            </div>
          </div>
          <div class="diaBodyBox">
            <div class="diaBodyli">
              <div class="liBox">
                <div class="liBoxItem">
                  <span>消费金额（元） </span>
                  <input type="text" v-model="editYuYue.amount" placeholder="请输入消费金额" />
                </div>
              </div>
              <div class="liBox">
                <div class="liBoxItem">
                  <!-- <span><span style="color: #f00">*</span>预约状态 </span>
                  <input type="text" value="进行中" readonly /> -->
                </div>
              </div>
            </div>
          </div>
          <div class="diaBodyBox">
            <div class="liBox2">
              <div class="liBoxItem2">
                <p>备注（管理员）</p>
                <el-input maxlength="80" type="textarea" v-model="editYuYue.adminMemo" placeholder="请输入备注信息（限80字以内）" />
              </div>
            </div>
          </div>
          <div class="diaBodyBox">
            <div class="liBox2">
              <div class="liBoxItem2">
                <p>备注（客户）</p>
                <el-input maxlength="80" type="textarea" v-model="editYuYue.reserveMemo" placeholder="请输入备注信息（限100字以内）" />
              </div>
            </div>
          </div>
        </div>
        <div class="btnbox1">
          <div class="btnbox">
            <button class="cancle" @click="cancleBtn1">取消</button>
            <button class="edit" @click="editBtn1">保存</button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'details',
  data() {
    return {
      editShowDia: false, // 编辑弹层控制
      userid: parseInt(sessionStorage.getItem('detailsId')),
      detailsData: {}, // 详情数据
      editYuYue: { // 编辑数据
        adminMemo: '', // 管理员备注
        amount: null, // 消费金额
        carId: '', // 车牌号
        createTime: '', // 创建时间
        id: null, // 预约id
        model: '', // 车辆型号
        name: '', // 预约人
        reserveDateTime: '', // 预约时间
        reserveMemo: '', // 预约备注
        status: 1, // 预约状态
        telephone: '', // 电话
        type: null, // 业务状态
        userId: null, // 创建人
        wechatName: '' // 微信名称
      },
      options1: [ // 服务项目
        {
          value: 0,
          label: '洗车'
        }, {
          value: 1,
          label: '贴膜'
        }, {
          value: 2,
          label: '维修'
        }, {
          value: 3,
          label: '改装'
        }
      ]
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    // 预约列表
    async getDetails() {
      this.detailsData = {}
      await this.$http.get('/reserve/one', { params: { id: this.userid } }).then(res => {
        // console.log(res)
        this.detailsData = res.data.data
        console.log(this.detailsData)
      })
    },
    // 编辑按钮
    editBtn() {
      this.editYuYue = {
        adminMemo: this.detailsData.adminMemo ? this.detailsData.adminMemo : null, // 管理员备注
        amount: this.detailsData.amount ? this.detailsData.amount : null, // 消费金额
        carId: this.detailsData.carId, // 车牌号
        createTime: this.detailsData.createTime ? this.detailsData.createTime : null, // 创建时间
        id: this.detailsData.id ? this.detailsData.id : null, // 预约id
        model: this.detailsData.model ? this.detailsData.model : null, // 车辆型号
        name: this.detailsData.name, // 预约人
        reserveDateTime: this.detailsData.reserveDateTime, // 预约时间
        reserveMemo: this.detailsData.reserveMemo ? this.detailsData.reserveMemo : null, // 预约备注
        status: this.detailsData.status, // 预约状态
        telephone: this.detailsData.telephone, // 电话
        type: this.detailsData.type, // 业务状态
        userId: parseInt(sessionStorage.getItem('userId')), // 创建人
        wechatName: this.detailsData.wechatName ? this.detailsData.wechatName : ''
      }
      console.log(this.editYuYue)
      this.editShowDia = true
    },
    // 编辑取消按钮
    cancleBtn1() {
      this.editShowDia = false
    },
    // 编辑提交按钮
    async editBtn1() {
      if (this.editYuYue.name === '') {
        return this.$message.warning('请填写姓名！')
      }
      if (this.editYuYue.type === null) {
        return this.$message.warning('请选择服务类型！')
      }
      if (this.editYuYue.reserveDateTime === '') {
        return this.$message.warning('请选择预约时间！')
      }
      if (this.editYuYue.carId === '') {
        return this.$message.warning('请填写车牌号！')
      }
      if (this.editYuYue.telephone === '') {
        return this.$message.warning('请填写电话号码！')
      }
      this.editYuYue.type = parseInt(this.editYuYue.type)
      this.editYuYue.userId = parseInt(sessionStorage.getItem('userId'))
      console.log(this.editYuYue)
      await this.$http.post('/reserve', this.editYuYue).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.$message.success('编辑成功！')
          // 刷新列表
          this.getDetails()
          this.editShowDia = false
        } else {
          this.$message.error('编辑失败，请稍后重试！')
        }
      })
    }
  }
}
</script>
<style>
body,
html,
#app {
  min-width: 1100px !important;
}
</style>
<style lang="less" scoped>
.details {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 15px 25px;
  box-sizing: border-box;
  .title {
    border-bottom: 1px solid #eee;
    .box1 {
      font-size: 16px;
      color: #555;
      margin-bottom: 10px;
    }
  }
  .detailsBox {
    .editBox {
      width: 100%;
      height: 50px;
      position: relative;
      button {
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 20px;
        width: 98px;
        height: 30px;
        border-radius: 15px;
        background-color: #333;
        color: #fff;
      }
    }
    .listBox {
      width: 100%;
      height: 30px;
      display: flex;
      font-size: 14px;
      color: #555;
      padding-right: 20px;
      box-sizing: border-box;
      margin-top: 10px;
      .listBox1 {
        flex: 1;
        position: relative;
        input {
          border: 1px solid #eee;
          outline: none;
        }
        .listBox2 {
          position: absolute;
          top: 0;
          right: 0;
          input {
            border: 1px solid #eee;
            outline: none;
          }
        }
      }
    }
    .bzBox {
      font-size: 14px;
      color: #333;
      p {
        margin: 0;
        margin-top: 20px;
        margin-bottom: 5px;
      }
    }
  }
  /deep/ .el-dialog__wrapper {
    .el-dialog {
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 0;
        .diaBox {
          .diaTitle {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #eee;
            font-size: 16px;
            color: #333;
            text-align: center;
          }
          .diaBody {
            .diaBodyBox {
              width: 100%;
              // height: 30px;
              padding: 0 25px;
              font-size: 14px;
              color: #333;
              box-sizing: border-box;
              margin-top: 15px;
              .diaBodyli {
                width: 100%;
                height: 30px;
                .liBox {
                  position: relative;
                  display: inline-block;
                  width: 50%;
                  height: 30px;
                  box-sizing: border-box;
                  .liBoxItem {
                    position: absolute;
                    top: 0;
                    right: 0;
                    input {
                      width: 217px;
                      height: 30px;
                      box-sizing: border-box;
                      border: 1px solid #eee;
                      outline: 1px solid #dcdfe6;
                    }
                    .el-select {
                      // width: 110px;
                      height: 30px;
                      .el-input {
                        // width: 110px;
                        height: 30px;
                        .el-input__inner {
                          // width: 110px;
                          height: 30px;
                        }
                        .el-input__suffix-inner {
                          height: 30px;
                        }
                      }
                    }
                  }
                }
              }
              .liBox1 {
                width: 100%;
                height: 30px;
                .liBoxItem1 {
                  float: right;
                  input {
                    width: 600px;
                    height: 30px;
                    box-sizing: border-box;
                    border: 1px solid #eee;
                    outline: 1px solid #dcdfe6;
                  }
                }
              }
              .liBox2 {
                width: 350px !important;
                .liBoxItem2 {
                  width: 100%;
                  p {
                    // margin: 0;
                    margin-bottom: 10px;
                    text-align: right;
                  }
                }
              }
            }
          }
          .btnbox1 {
            width: 100%;
            height: 80px;
            background-color: #fff;
            .btnbox {
              position: absolute;
              right: calc(50% - 135px);
              bottom: 25px;
              .cancle {
                cursor: pointer;
                width: 100px;
                height: 35px;
                background-color: #fff;
                color: #333;
                font-size: 14px;
                border-radius: 20px;
                margin-right: 70px;
              }
              .edit {
                cursor: pointer;
                width: 100px;
                height: 35px;
                background-color: #333;
                color: #fff;
                font-size: 14px;
                border-radius: 20px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
